<template>
  <view class="hs-tab-components">
    <view class="tabs-box">
      <view
        class="tab-item"
        :class="[activeIndex === index ? 'active' : '']"
        @click="changeTitle(index)"
        v-for="(item, index) in menuClassList"
        :key="index"
      >
        {{ item.name }}
        <text v-if="item.downIcon" class="iconfont icon-weibiaoti--10"></text>
      </view>
    </view>
    <view class="more-box">
      <text class="iconfont icon-weibiaoti--4"></text>
    </view>
  </view>
</template>

<script>
import { defineComponent, reactive, toRefs, onMounted } from "vue";

export default defineComponent({
  name: "hstab005",
  props: {
    menuClassList: {
      type: Array,
      default: () => [
        { name: "近期加购", downIcon: true },
        { name: "降价", downIcon: true },
        { name: "有货" },
        { name: "筛选", downIcon: true },
      ],
    },
  },
  components: {},
  setup(props) {
    const data = reactive({
      activeIndex: 0,
      menuClassList: props.menuClassList,
    });
    onMounted(() => {});
    const changeTitle = (index) => {
      data.activeIndex = index;
    };
    return {
      changeTitle,
      ...toRefs(data),
    };
  },
});
</script>

<style scoped lang="less">
.hs-tab-components {
  position: relative;
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: space-between;
  .tabs-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    flex: 1;
    .tab-item {
      display: inline-block;
      padding: 6rpx 16rpx;
      border-radius: 10rpx;
      font-size: 26rpx;
      // font-weight: 300;
      color: #7e7e7e;
      .icon-weibiaoti--10 {
        display: inline-block;
        transform: rotate(-90deg);
        font-size: 24rpx;
      }

      &.active {
        color: #ff0777;
        background: #fff;
      }
    }
  }
  .more-box {
    width: 100rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-left: 2rpx solid #c0c0c0;
    font-size: 28rpx;
    .icon-weibiaoti--4 {
      font-size: 40rpx;
      margin: 0 8rpx;
      margin-top: 4rpx;
      color: #7d7d7d;
    }
  }
}
</style>
